<template>
	<view class="payPage">
		<view class="box"></view>
		<!-- 车次信息 -->
		<view class="box1">
			<!-- 列车信息 -->
			<text>取票号：JJ565125</text>
			<view class="carDetail">
				<!-- 开始的地点-时间 日期 -->
				<view class="startInfo trainItem">
					<text class="city">{{trainNumberData.startCity}}</text>
					<text class="time">{{trainNumberData.startTime}}</text>
					<text class="dates">09-09 周五</text>
				</view>
				<!-- 耗时 和 车次、 -->
				<view class="trainnumber trainItem">
					<text>{{trainNumberData.allTimes}}</text>
					<text>时刻表</text>
					<text class="dates">{{trainNumberData.allTimes}}</text>
				</view>
				<!-- 结束时间 地点 日期 -->
				<view class="endInfo trainItem">
					<text class="city">{{trainNumberData.endCity}}</text>
					<text class="time">{{trainNumberData.endTime}}</text>
					<text class="dates">09-09 周五</text>
				</view>
			</view>
			<!-- 身份证等信息 -->
			<view class="customerInfo">
				<view class="left">
					<text> {{trainNumberData.username}} <text
							style="background-color: white; border: 1px solid #1AA034; border-radius: 5px;padding: 5rpx;">成人票</text>
					</text>

					<text>{{trainNumberData.Idcard}}</text>
					<text style="color: #1AA034;">出票成功</text>
				</view>
				<view class="right">
					<text>二等座 {{trainNumberData.price}}</text>
					<text><text
							style="background-color: white; border: 1px solid #1AA034; border-radius: 5px; color: #1AA034;padding: 5rpx;">靠窗
						</text>
						02车厢16A </text>
				</view>
			</view>
		</view>
		<!-- 订单号 -->
		<view class="box2">
			<u-cell-group>
				<u-cell title="订单号" value="E2352523652"></u-cell>
				<u-cell title="通知手机" value="1616646482"></u-cell>
			</u-cell-group>
		</view>
		<view class="box3">
			<u-cell-group>
				<u-cell title="订单号" value="E2352523652"></u-cell>
				<u-cell title="订单总计" :value="`￥${40}`"></u-cell>
			</u-cell-group>
		</view>
		<view class="payBtn" @click="switchColor">
			去支付
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				trainNumberData: {},
				openid: '',
			}
		},
		methods: {
			getobder() {
				uni.request({
					url: "http://localhost:8000/pay/placeOrder",
					method: "POST",
					data: {
						openid: this.openid,
						total: 1,
						description: "企鹅",
						out_trade_no: "100143578fded"
					},
					success(results) {

						if (results.data.code == 200) {
							const {
								appid,
								nonceStr,
								package: pkg,
								timeStamp,
								signType,
								paySign
							} = results.data.data

							uni.requestOrderPayment({
								timeStamp,
								nonceStr,
								package: pkg,
								signType,
								paySign,
								// 支付成功的回调函数
								success(res) {
									console.log('res---=====支付成功', res)
									uni.showToast({
										title: "支付成功"
									})
								},

								fail(res) {
									console.log('支付失败', res)
									wx.showToast({
										title: '你竟然取消支付！',
										icon: 'error'
									})
								}
							})
						}
					}
				})
			},
			switchColor() {
				let _this = this
				uni.login({
					success(res) {
						console.log('res', res.code)
						if (res.code) {
							uni.request({
								url: "https://api.weixin.qq.com/sns/jscode2session",
								method: "GET",
								data: {
									appid: "wxe5f62bc262ee9106",
									secret: "70fa451aaef41134568ca23551dea91f",
									js_code: res.code,
									grant_type: "authorization_code"
								},
								success(result) {
									if (result.data.openid) {
										_this.openid = result.data.openid
										console.log(_this.openid, "openid")
										_this.getobder()
									}
								}
							})
						}
					}
				})

			},


		},
		onLoad(options) {
			console.log(options);
			// 先解密
			let codeString = decodeURIComponent(options.orderInfo)
			// 再转回对象
			let par = JSON.parse(codeString)
			console.log("订单填写页面接受参数", par);
			this.trainNumberData = par
		}
	}
</script>

<style lang="less" scoped>
	.payPage {
		width: 100%;
		height: 100%;
		background-color: #F4F4F4;
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: column;
		box-sizing: border-box;

		.box {
			width: 100%;
			height: 350rpx;
			background-color: #1BA9BA;
			border-radius: 0 0 40rpx 40rpx;
		}

		.box1 {
			width: 95%;
			height: 530rpx;
			background-color: #fff;
			border-radius: 30rpx;
			margin-top: -220rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;

			// 顶部信息
			.carDetail {
				width: 100%;
				height: 200rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				margin-bottom: 30rpx;

				.trainItem {
					width: 200rpx;
					height: 90%;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					line-height: 60rpx;
				}

				.city {
					font-size: 40rpx;
				}

				.time {
					font-size: 40;
					font-weight: 700;
				}

				.dates {
					color: #666;
					font-size: 25rpx;
				}

			}

			.customerInfo {
				width: 92%;
				height: 200rpx;
				background-color: #F4F4F4;
				border-radius: 15rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				.left {
					width: 45%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
				}

				.right {
					width: 45%;
					height: 100%;
					display: flex;
					flex-direction: column;
					justify-content: space-evenly;
					align-items: flex-end;
				}
			}
		}

		.box2 {
			width: 90%;
			height: 180rpx;
			background-color: #fff;
			border-radius: 15rpx;
			margin-top: 25rpx;
		}

		.box3 {
			width: 90%;
			height: 180rpx;
			background-color: #fff;
			border-radius: 15rpx;
			margin-top: 25rpx;
		}

		.payBtn {
			border-radius: 50rpx;
			width: 90%;
			height: 100rpx;
			background-color: orange;
			margin-top: 20rpx;
			color: #fff;
			display: flex;
			justify-content: space-around;
			align-items: center;
			font-size: 23px;
		}
	}
</style>